<!-- 物资类型-物资类型种类页面弹窗页面 -->
<template>
  <px-dialog v-model="dialogVisible" class="equip-dialog" :title="typeTitle" width="960px" @open="openDialog" @close="closeDialog">
    <px-form ref="formRef" :model="formValue" :rules="rules" label-position="right" label-width="120px">
      <px-row>
        <px-col :span="12">
          <px-form-item label="物资类型" prop="typeName">
            <px-input :value="formValue.typeName" placeholder="自动带出备件类型" disabled />
          </px-form-item>
        </px-col>
        <px-col :span="12">
          <px-form-item label="物资名称" prop="name">
            <px-input v-model="formValue.name" placeholder="请输入" maxlength="50" clearable />
          </px-form-item>
        </px-col>
        <px-col :span="12">
          <px-form-item label="品牌" prop="brand">
            <px-input v-model="formValue.brand" placeholder="请输入" maxlength="50" clearable />
          </px-form-item>
        </px-col>
        <px-col :span="12">
          <px-form-item label="规格型号" prop="specification">
            <px-input v-model="formValue.specification" placeholder="请输入" maxlength="50" clearable />
          </px-form-item>
        </px-col>
        <px-col :span="12">
          <px-form-item label="单位" prop="unit">
            <px-input v-model="formValue.unit" placeholder="请输入" maxlength="50" clearable />
          </px-form-item>
        </px-col>
        <px-col :span="12">
          <px-form-item label="安全库存">
            <px-input-number v-model="formValue.safeStock" placeholder="请输入" :min="0" maxlength="50" />
            <px-tooltip content="小于等于安全库存会给预警提醒人发送邮件提醒" placement="top">
              <span style="margin-top: 8px; margin-left: 4px">
                <px-icon :size="18">
                  <InfoCircleFilled />
                </px-icon>
              </span>
            </px-tooltip>
          </px-form-item>
        </px-col>
      </px-row>
      <px-col :span="24">
        <px-form-item label="备注" prop="remark">
          <px-input
            v-model="formValue.remark"
            type="textarea"
            placeholder="请输入问题描述"
            :autosize="{ minRows: 2, maxRows: 4 }"
            maxlength="1000"
            clearable
            show-word-limit
          />
        </px-form-item>
      </px-col>
    </px-form>
    <div class="equip-dialog-footer">
      <px-button @click="closeDialog">取消</px-button>
      <px-button type="primary" :loading="loading" @click="handleSubmit(formRef)">保存</px-button>
    </div>
  </px-dialog>
</template>

<script setup lang="ts">
import { computed, reactive, ref, toRefs } from "vue";
import { PxMessage } from "px-ui";
import { queryDictData } from "@/api/common";
import { addToolMaterial, editToolMaterial } from "@/api/erc/material";

// 调用父级-关闭弹窗、查询列表方法
const emits = defineEmits(["closeDialog", "queryTable"]);
// 父级传过来的值
const props = defineProps(["dialogVisible", "dialogType", "rowData", "treeDataList", "source"]);

const dialogVisible = computed(() => props.dialogVisible);
// 页面本身的值
const formRef = ref();
const loading = ref(false);
const state = reactive<any>({
  typeTitle: "新增物资种类",
  formValue: {
    typeCode: "",
    name: "",
    specification: "",
    brand: "",
    unit: "",
    storageLocation: "",
    safeStock: null,
    remark: ""
  },
  facCodeList: [] //地块下拉框
});
const { typeTitle, formValue, isDisabled, facCodeList } = toRefs(state);
// 归属地块下拉框
const querySelectList = async () => {
  facCodeList.value = await queryDictData({ typeCode: "HSE_MATERIAL_FAC" });
};
// 表单校验规则
const rules = computed(() => ({
  name: [{ required: true, message: "物资名称不能为空", trigger: "blur" }],
  specification: [{ required: true, message: "规格型号不能为空", trigger: "blur" }],
  brand: [{ required: true, message: "品牌不能为空", trigger: "blur" }],
  unit: [{ required: true, message: "单位不能为空", trigger: "blur" }]
}));

// 打开弹窗
const openDialog = async () => {
  formRef.value.resetFields();
  await querySelectList();
  console.log(props.rowData);

  if (props.dialogType === "add") {
    typeTitle.value = "新增物资种类";
    const treeDataList = JSON.parse(JSON.stringify(props.treeDataList));
    formValue.value.typeCode = treeDataList.path;
    formValue.value.typeName = treeDataList.name;
  } else if (props.dialogType === "edit") {
    typeTitle.value = "编辑物资种类";
    const rowDataPlus = JSON.parse(JSON.stringify(props.rowData));
    formValue.value = rowDataPlus;
    formValue.value.typeCode = rowDataPlus.typeCode;
  } else if (props.dialogType === "copy") {
    typeTitle.value = "复制物资种类";
    const rowDataPlus = JSON.parse(JSON.stringify(props.rowData));
    formValue.value = rowDataPlus;
    formValue.value.typeCode = rowDataPlus.typeCode;
  }
};
// 关闭弹窗
const closeDialog = () => {
  formValue.value = {};
  emits("closeDialog");
  loading.value = false;
};
// 提交
const handleSubmit = async (formEl: any) => {
  if (!formEl) return;
  await formEl.validate(async valid => {
    if (valid) {
      loading.value = true;
      if (props.dialogType === "add") {
        const params = formValue.value;
        await addToolMaterial(params)
          .then(() => {
            PxMessage.success("新增成功");
            emits("closeDialog");
            emits("queryTable");
          })
          .catch(() => {
            loading.value = false;
          });
      } else if (props.dialogType === "edit") {
        const params = formValue.value;
        await editToolMaterial(params)
          .then(() => {
            PxMessage.success("编辑成功");
            emits("closeDialog");
            emits("queryTable");
          })
          .catch(() => {
            loading.value = false;
          });
      } else if (props.dialogType === "copy") {
        const params = formValue.value;
        await addToolMaterial(params)
          .then(() => {
            PxMessage.success("复制成功");
            emits("closeDialog");
            emits("queryTable");
          })
          .catch(() => {
            loading.value = false;
          });
      }
    }
  });
};
</script>

<style lang="scss" scoped>
.equip-dialog {
  .equip-dialog-footer {
    margin-top: 66px;
    text-align: right;
  }
}
</style>
